<template name="sendcar">
	<!-- 盘点物资列表 -->
	<view class="mypage">
		<!-- 手风琴效果 -->
		<uni-collapse accordion="true">
			
			<uni-collapse-item :title="item.STORENAME"
			:showAnimation="true"
			 v-for="(item,index) in planList" 
			 :Index="index"
			 @getChildren='getChildren'>
				<view class="bg-blue light collapse-item">
					<text class="">位置</text>
					<text class="">已盘物资量</text>
					<text class="">未盘物资量</text>
				</view>
				<view class="light collapse-item top-border" :class="itenC.WPDNUM==0? 'bg-green':'bg-orange' " v-for="(itenC,indexC) in item.children" :key='indexC'>
					<text class="">{{ itenC.STATIONNAME }}</text>
					<text class="">{{ itenC.YPDNUM }}</text>
					<text class="">{{ itenC.WPDNUM }}</text>
				</view>
				<view class="more-button" @click='getChildren(index,1)'>
					<text>{{ item.subPage>=item.subTotal?'没有数据了' : '点击加载更多'  }}</text>
				</view>
				
			</uni-collapse-item>
		</uni-collapse>
		
		<!-- <view class="more-button" >
			<text>  点击加载更多  </text>
		</view> -->
		

		<modal title="高级查询" placeholder="" :isShow='isShowModal' @cancelModal='cancelModal' @okModal='okModal'></modal>

	</view>

</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import api from '@/common/api.js';
	import utils from '@/common/util.js';
	import modal from '@/components/modal/modal_mater.vue'
	import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
	import uniCollapseItem from '@/components/uni-collapse/uni-collapse-item.vue'

	let query = {
		"category": "",
		"page": 1,
		"rows": "10",
		"sidx": "",
		"sord": "desc",
		"queryJson": {},
		"TYPE": "",
		"BILLNO": "",
		"DATE": "2020-06",
		"userId": "",
		"account": ""
	}
	let _self, menuType, page = 1,
		total = 1,
		BILLNO = '',
		TYPE = '',
		queryJson = {};
	export default {
		computed: mapState(['userInfo', 'baseUrl']),
		data() {
			return {
				planList: [],
				keyword: '',
				isShowModal: false,
				materType: 0
			};
		},

		onLoad(p) {
			// console.log(p)
			_self = this
			query.userId = _self.userInfo.UserId
			query.account = _self.userInfo.Account
			// BILLNO = p.id
			// TYPE = p.t == 2 ? '' : '1'
			// this.materType = TYPE
			page = 1;
			total = 1;
			this.getList()
		},
		components: {
			modal,
			uniCollapse,
			uniCollapseItem
		},
		onNavigationBarButtonTap() {
			this.isShowModal = true
		},
		//下拉刷新
		onPullDownRefresh: function() {
			// 重置分页及数据
			page = 1;
			total = 1;
			this.getList();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
			uni.showToast({
				"title": "数据已刷新",
				icon: "none"
			});
		},
		// 加载更多
		onReachBottom: function() {
			this.getList();
		},
		methods: {
			openDetail: function(e) {
				console.log(999);
				// _self.planList[e].ischeck = !_self.planList[e].ischeck;
			},
			handelSearch() {
				// queryJson.BILLNO = _self.keyword;
				// query.queryJson = JSON.stringify(queryJson);
				// console.log(_self.keyword);
				// console.log(query);
				page = 1;
				total = 1;
				_self.planList = [];
				this.getList();
			},
			
			getList() {
				if (page > total) {
					return utils.tips('没有数据了');
				}
				query.page = page;
				// queryJson.PK_INVENTORY = BILLNO
				// queryJson.IsInventory = TYPE
				// query.queryJson = JSON.stringify(queryJson);
				console.log(query);
				// utils.mShowLoading();
				
				this.axios({
					url: '/api/APPCommon//GetListPage_Count',
					data: query ,
					isLoading:1
				}).then(res=>{
					let { Result } = res ;
					console.log(res);
					let a = Result.rows.map( item =>{
						item.children = []
						item.subPage = 1
						item.subTotal = 1
						return item ;
					})
					if(page==1){
						_self.planList = a ;
					}else{
						_self.planList = [..._self.planList,...a] ;
					}
					page++ 
					total = Result.total
					// console.log(res);
				})
			},
			setPageTitle(d) {
				uni.setNavigationBarTitle({
					title: d
				});
			},

			// 控制高级查询条件
			cancelModal() {
				this.isShowModal = false
			},
			okModal(val) {
				this.cancelModal();
				queryJson = { ...val
				};
				page = 1;
				total = 1;
				_self.planList = [];
				this.getList();
			},
			
			getChildren(index,type) {
				// console.log(index) ;
				let data = _self.planList[index] ;
				if(!type && data.children.length>1 ) return ;
				// console.log(data.subPage,data.subTotal);
				if(data.children.length>1 && data.subPage <= data.subTotal ){
					data.subPage = data.subPage + 1
				}
				if(data.subPage > data.subTotal){
					return utils.tips('没有数据了');
				}
				// console.log(JSON.stringify(data));
				let queryDeep = JSON.parse(JSON.stringify(query));
				let queryChildren = queryDeep;
				queryDeep.page = data.subPage
				let ttt = {PK_STORE: data.PK_STORE,PK_ORG: data.PK_ORG } ;
				queryChildren.queryJson = JSON.stringify(ttt);
				// console.log(queryChildren);
				// utils.mShowLoading();
				this.axios({
					url: '/api/APPCommon/GetListPage_CountDetail',
					data: queryChildren ,
					isLoading:1
				}).then(res=>{
					let { Result } = res ;
					_self.planList[index].children = [ ..._self.planList[index].children,...Result.rows ] ;
					_self.planList[index].subTotal = Result.total
					_self.planList[index].subPage = data.subPage
				})
			}

		}
	}
</script>

<style scoped>
	.collapse-item {
		display: flex;
		justify-content: space-around;
		padding: 30rpx 20rpx;
	}
	.collapse-item text {
		flex: 1;
		text-align: center;
	}
	.top-border {
		border-top: 1rpx solid #F1F1F1;
	}
	
	.more-button{
		padding: 30rpx 0;
		text-align: center;
	}
	
</style>
